<template>
  <div class="box">
    <button>普通按钮</button>
    <br />
    <button type="primary" :class="{ primary: type === 'primary' }">
      主要 按钮
    </button>
    <br />
    <button type="success" :class="{ success: type === 'success' }">
      成功 按钮
    </button>
    <br />
    <button type="info" :class="{ info: type === 'info' }">信息 按钮</button>
    <br />
    <button type="warning" :class="{ warning: type === 'warning' }">
      警告 按钮
    </button>
    <br />
    <button type="danger" :class="{ danger: type === 'danger' }">危险 按钮</button>
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    type: {
      type: String
    }
  },
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
button {
  color: white;
}
.primary {
  background-color: #409eff;
}
.success {
  background-color: #67c23a;
}
.info {
  background-color: #909399;
}
.warning {
  background-color: #e6a23c;
}
.danger {
  background-color: #f56c6c;
}
</style>
